<template>
	<view class="confirmInfo">
		<view class="test-info">
			<xbd-image-title :title="'考生信息'" :image="require('@/static/image/exam/info.png')" />
			<view class="name-info">
				<view class="left">
					<view class="left-info">
						<text>姓名</text>
						<text>{{ userInfo.name }}</text>
					</view>
					<view class="left-info">
						<text>工号</text>
						<text>{{ userInfo.job_number || '-'}}</text>
					</view>
					<view class="left-info">
						<text>部门</text>
						<text>{{ userInfo.department || '-'}}</text>
					</view>
				</view>
				<view class="right">
					<image v-if="userInfo.avatar" :src="userInfo.avatar" />
					<image v-else :src="require('@/static/image/avatar.png')"></image>
				</view>
			</view>
		</view>
		<view class="know-info">
			<xbd-image-title :title="'考试须知'" :image="require('@/static/image/exam/know.png')" />
			<view class="area">
				<view class="text">1.考试时长为30min，开始考试后立即计时。</view>
				<view class="text">2.考试满分为100分，0—59分为不合格，60—100分为合格。</view>
				<view class="text">3.考试时间结束后，自动提交试卷。</view>
				<view class="text">4.考试范围包含学习任务中所有知识点。</view>
			</view>
		</view>
		<xbd-button text="开始考试" @clickBtn="goExam()"></xbd-button>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	const dayjs = require("dayjs");
	export default {
		name: "confirmInfo",
		data() {
			const nowDate = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
			return {
				id: '',
				nowDate: nowDate,
				time:''
			};
		},
		methods: {
			timeFormat(time){
						    return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
						},
			goExam() {
				console.log(this.time,'time')
				console.log(this.nowDate,'nowDate')
				if(this.timeFormat(this.time) > this.nowDate){
					uni.redirectTo({
						url: `/pages/identify/exam/exam?id=${this.id}`,
					})
				}else{
					this.$showToast('操作失败，考试已结束');
				}
			},
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad(res) {
			this.id = res.id
			this.time=res.time
			console.log(res,'res')
		}
	};
</script>

<style lang="scss" scoped>
	.confirmInfo {
		padding: 30rpx;
		box-sizing: border-box;

		.test-info {
			width: 100%;
			height: 388rpx;
			padding: 30rpx;
			box-sizing: border-box;
			background-color: #fff;
			margin-bottom: 30rpx;

			.name-info {
				display: flex;
				justify-content: space-between;

				.left {
					&-info {
						margin-top: 40rpx;

						text {
							margin-right: 30rpx;
							font-size: 30rpx;
						}

						& text:first-child {
							color: #a0a7b8;
							font-size: 26rpx;
						}
					}
				}

				.right {
					width: 156rpx;
					margin-top: 50rpx;

					image {
						width: 156rpx;
						height: 156rpx;
					}
				}
			}
		}

		.know-info {
			width: 100%;
			// height: 426rpx;
			background-color: #fff;
			padding: 30rpx;
			box-sizing: border-box;
			margin-bottom: 50rpx;

			.area {
				margin-top: 20rpx;

				.text {
					font-size: 30rpx;
					margin-top: 20rpx;
					line-height: 52rpx;
				}
			}
		}

		.btn {
			button {
				width: 100%;
				height: 88rpx;
				background-color: #2a84e0;
				font-size: 32rpx;
				line-height: 88rpx;
				color: #fff;
			}
		}
	}
</style>
